<template>
	<view class="coreshop-flex coreshop-flex-wrap plan-other" v-if="info">
		<block v-if="info.time">
			<u-icon
				name="clock" 
				custom-prefix="custom-icon" 
				size="20" 
				width="20"
				color="#FF8A00" 
				:custom-style="{marginRight:'9rpx'}">
			</u-icon>
			<text class="u-m-r-20">{{info.time || '--'}}</text>
		</block>
		<block v-if="info.glr.length">
			<u-icon
				name="man-add" 
				custom-prefix="custom-icon" 
				color="#FF8A00" 
				size="20" 
				:custom-style="{marginRight:'9rpx'}">
			</u-icon>
			<text class="u-m-r-20">
				<block v-for="(item,index) in info.glr" :key="index">
					<text class="text" :class="{'normal-color':item.glrtype=='1' || item.type=='1','no-read':showRead && item.glrread=='0'}">{{item.name || item.glrname}}</text>，
				</block>
			</text>
		</block>
		<block v-if="info.glkh.length">
			<u-icon
				name="server-man"  
				color="#FF8A00"
				size="20" 
				width="20"
				:custom-style="{marginRight:'9rpx'}">
			</u-icon>
			<text class="c-m-r-20">
				<block v-for="(item,index) in info.glkh" :key="index">
					<text class="text">{{item.name || item.glkhname}}</text>,
				</block>
			</text>
		</block>
	</view>
</template>

<script>
	export default{
		props:{
			info:{
				type:Object,
				default:{}
			},
			showRead:{
				type:Boolean,
				default:false
			}
		},
		created() {
			 this.data = this.info || {};
		}
	}
</script>

<style lang="scss" scoped>
	.plan-other{
		font-size: 24rpx;
		line-height: 38rpx;
		color: #333;
		padding: 10rpx 0;
	}
	.no-read{
		position: relative;
		&:after{
			content: '';
			width: 14rpx;
			height: 14rpx;
			background: red;
			border-radius: 50%;
			position: absolute;
			right: -8rpx;
			top: -4rpx;
			z-index: 9;
		}
	}
	.text{
		display: inline-block;
	}
</style>
